
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>侧边导航跟随模块</title>
<style>
/* 第三步：我们使用position中的固定定位fixed,给侧边导航设置距离顶部120像素，距离右边300像素，这样子侧导航就会一直悬浮在右侧了 */
.side_nav {line-height:34px;color:#999;width:138px; height: 385px; 
    display: block; overflow: hidden; position: fixed; 
    right:300px; top: 120px; z-index:999;}
.side_nav dt {width: 100%; height: auto; margin: 10px 0 0; 
    display: block; position: relative; zoom: 1; 
    z-index: 10; cursor: pointer; }
.side_nav dt strong {padding:2px 15px 4px 15px;font-size:14px; 
    font-weight: normal; color: #333; background:#e7e7e7; 
    border-radius: 4px;position:relative;left:28px;
    border-radius:20px;top:-13px;}
.side_nav .f-hover strong {background:#518ABC; color: #fff;}
.container{width:50%;margin: 0 auto; text-align: center; line-height: 300px;}
.side_nav_scroll{width:100%;height:300px;}
</style>
<script src="https://www.php.cn/static/js/jquery-1.8.3.min.js?1.8.3"></script>
<script type="text/javascript">
$(function(){
    // 第四步：我们添加一个滚动到对应模块的时候，改变对应侧导航的背景色的功能
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        // 首先，获取模块数量进行循环遍历
        var forSize = $(".side_nav_scroll").length;
        for(i=0;i<forSize;i++){
            // 其次，在循环中获取每一个side_nav_scroll距离顶部的距离
            var plateTop = $(".side_nav_scroll").eq(i).offset().top;
            // 然后当滚动条的高度大于等于当前side_nav_scroll
            // 就给同样排序的侧边导航加上选中样式
            // 并且把它同级元素的样式移除
            // 最后，我们就能得到当前模块的侧边导航被选中了
            if(scrollTop>=plateTop){
                $(".side_nav dt").eq(i).addClass("f-hover").siblings("dt").removeClass("f-hover");
            }
        }
    })
    // 第五步；我们加一个点击侧边导航到达指定模块
    $(".side_nav dt").click(function(){
        //首先，使用index()获取当前索引值，计数从0开始
        var n = $(this).index();
        //然后，得到索引值后，去获取同样位置的模块距离顶部的高度
        var plateTop = $(".side_nav_scroll").eq(n).offset().top;
        //最后，让滚动条滚动到该高度就可以了
        $("body,html").animate({scrollTop:plateTop},160)
    })

})
</script>
</head>
<body style="height:2800px; background:#F1F1F1">
<!-- 第二步：我们写好侧边导航 -->
<ul class="side_nav">
    <dt class="f-hover"><strong>游戏推荐</strong></dt>
    <dt class=""><strong>应用推荐</strong></dt>
    <dt class=""><strong>最新专题</strong></dt>
    <dt class=""><strong>知识专栏</strong></dt>
    <dt class=""><strong>高清美图</strong></dt>
    <dt class=""><strong>精彩视频</strong></dt>
    <dd></dd>
</ul>
<!-- 第一步；我们先写好六个模块 -->
<div class="container">
  <div class="side_nav_scroll" style="background:#FF6600;">游戏推荐</div>
  <div class="side_nav_scroll" style="background:#006600;">应用推荐</div>
  <div class="side_nav_scroll" style="background:#aa6600;">最新专题</div>
  <div class="side_nav_scroll" style="background:#BB6600;">知识专栏</div>
  <div class="side_nav_scroll" style="background:#996600;">高清美图</div>
  <div class="side_nav_scroll" style="background:#CC6600;">精彩视频</div>
</div>
</body>
</html>


前端小知识之侧边导航跟随#前端 #JavaScript #程序员 
CSS知识要点：
如果某元素添加了position:fixed属性，会把该元素设置为固定定位，该元素会变成一个有框的空间，简单理解就是，添加了position:fixed属性的元素，会浮起来，相对于浏览器窗口进行定位。
JavaScript知识要点：
siblings()方法会沿着DOM元素的同级元素向前和向后遍历，返回共享相同父元素的所有子元素（被选元素除外）。
$(window).scrollTop()。

